<!DOCTYPE html>
<html lang="en" class="no-js">
  <script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
  <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="generator" content="Hugo 0.55.6" />

  <meta name="ROBOTS" content="INDEX, FOLLOW" />

  <link rel="alternate" type="application/rss&#43;xml" href="/index.xml" />

  <link rel="shortcut icon" href="v0.6/assets/favicons/favicon.ico" />
  <link rel="apple-touch-icon" href="v0.6/assets/favicons/apple-touch-icon.png" sizes="180x180" />
  <link rel="icon" type="image/png" href="v0.6/assets/favicons/favicon-16x16.png" sizes="16x16" />
  <link rel="icon" type="image/png" href="v0.6/assets/favicons/favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="v0.6/assets/favicons/android-144x144.png" sizes="36x36" />
  <link rel="icon" type="image/png" href="v0.6/assets/favicons/android-144x144.png" sizes="48x48" />
  <link rel="icon" type="image/png" href="v0.6/assets/favicons/android-144x144.png" sizes="72x72" />
  <link rel="icon" type="image/png" href="v0.6/assets/favicons/android-144x144.png" sizes="96x196" />
  <link rel="icon" type="image/png" href="v0.6/assets/favicons/android-144x144.png" sizes="144x144" />
  <link rel="icon" type="image/png" href="v0.6/assets/favicons/android-192x192.png" sizes="192x192" />

  <title>MeshMap Snapshot | Meshery</title>
  <meta property="og:title" content="MeshMap Snapshot" />
  <meta property="og:description"
    content="As a self-service engineering platform, Meshery enables collaborative design and operation of cloud native infrastructure.
" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://docs.meshery.io" />
  <meta property="og:site_name" content="https://docs.meshery.io" />
  <meta property="og:image"
    content="https://raw.githubusercontent.com/meshery/meshery/master/docs/assets/img/meshery-cncf-twitter.png" />

  <meta itemprop="name" content="MeshMap Snapshot" />
  <meta itemprop="description"
    content="As a self-service engineering platform, Meshery enables collaborative design and operation of cloud native infrastructure.
" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="MeshMap Snapshot" />
  <meta name="twitter:description"
    content="As a self-service engineering platform, Meshery enables collaborative design and operation of cloud native infrastructure.
" />
  <meta name="twitter:image"
    content="https://raw.githubusercontent.com/meshery/meshery/master/docs/assets/img/meshery-cncf-twitter.png" />
  <!-- <link rel="stylesheet" href="v0.6/assets/css/palette.css" /> -->
  <!-- <link rel="stylesheet" href="v0.6/assets/css/anchorjs.css" /> -->
  <link rel="stylesheet" href="/assets/css/sass.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"
    integrity="sha512-qzgd5cYSZcosqpzpn7zF2ZId8f/8CHmFKZ8j7mU4OUXTNRd5g+ZHBPsgKEwoqxCtdQvExE5LprwwPAgoicguNg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!-- Anchorjs included for adding hover anchor links to headings -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.2.2/anchor.min.js"></script>
  <script>
    $(function () {
      /** AnchorJS options and selector */
      anchors.options = {
        visible: "hover",
        placement: "right",
      };
      anchors.add("h1, h2, h3, h4, h5");
    });
    // Function to handle anchor links
    document.addEventListener('click', function (event) {
      if (event.target.tagName === 'A' && event.target.getAttribute('href').startsWith('#')) {
        window.location.hash = event.target.getAttribute('href');
      }
    });
  </script>
</head>
<style></style> <header>
  <nav class="js-navbar-scroll navbar">
    <a class="navbar-brand" href="/">
      <div class="navbar-logo">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 379.08 80.17"><defs><style>.cls-1{fill:#00d3a9;}.cls-2{fill:#00b39f;}.cls-3 {fill:var(--meshery-logo-text-fill);}</style></defs><polygon class="cls-1" points="41.26 18.9 41.26 38.04 57.86 28.43 41.26 18.9"/><polygon class="cls-1" points="41.26 42.05 41.26 61.29 58.01 51.71 41.26 42.05"/><polygon class="cls-2" points="38.87 37.91 38.87 19.06 22.48 28.45 38.87 37.91"/><path class="cls-2" d="M6,61.22A40.35,40.35,0,0,0,18.71,74V53.86Z"/><polygon class="cls-2" points="38.87 61.2 38.87 42.19 22.44 51.7 38.87 61.2"/><polygon class="cls-1" points="21.1 72.81 37.74 63.3 21.1 53.68 21.1 72.81"/><polygon class="cls-2" points="59.15 72.92 59.15 53.81 42.53 63.31 59.15 72.92"/><path class="cls-2" d="M75.42,59a39.88,39.88,0,0,0,4.71-17.18l-17.32,9.9Z"/><polygon class="cls-1" points="61.54 49.7 78.23 40.15 61.54 30.55 61.54 49.7"/><polygon class="cls-2" points="59.15 26.42 59.15 7.43 42.61 16.91 59.15 26.42"/><polygon class="cls-2" points="59.15 49.61 59.15 30.45 42.57 40.05 59.15 49.61"/><polygon class="cls-2" points="40.07 80.17 40.07 80.17 40.07 80.17 40.07 80.17"/><polygon class="cls-1" points="21.1 30.41 21.1 49.72 37.8 40.05 21.1 30.41"/><path class="cls-2" d="M38.87,0A40,40,0,0,0,21.28,4.65L38.87,14.77Z"/><polygon class="cls-1" points="21.1 7.31 21.1 26.49 37.81 16.91 21.1 7.31"/><path class="cls-2" d="M18.71,6.14A40.28,40.28,0,0,0,6,18.94l12.72,7.34Z"/><path class="cls-1" d="M59,4.74A40,40,0,0,0,41.26,0V14.93Z"/><path class="cls-1" d="M0,41.48A40,40,0,0,0,4.79,59.16L17.67,51.7Z"/><path class="cls-1" d="M4.79,21A40,40,0,0,0,0,38.58L17.69,28.45Z"/><path class="cls-2" d="M21.24,75.49a39.88,39.88,0,0,0,17.63,4.66V65.41Z"/><path class="cls-1" d="M74.17,19A40.24,40.24,0,0,0,61.54,6.21v20.1Z"/><path class="cls-1" d="M61.54,74A40.34,40.34,0,0,0,74.23,61.07L61.54,53.75Z"/><path class="cls-2" d="M80.13,38.48a39.88,39.88,0,0,0-4.76-17.42L62.64,28.43Z"/><path class="cls-1" d="M41.26,80.15a39.79,39.79,0,0,0,17.59-4.64L41.26,65.34Z"/><polygon class="cls-2" points="18.71 49.54 18.71 30.61 2.27 40.04 18.71 49.54"/><polygon class="cls-3" points="269.94 29.39 269.94 30.89 269.94 37.93 269.94 46.53 269.94 59.08 303.36 59.08 303.36 52.03 276.99 52.03 276.99 46.53 276.99 44.98 297.25 44.98 297.25 37.93 276.99 37.93 276.99 30.89 303.36 30.89 303.36 23.84 269.94 23.84 269.94 29.39"/><polygon class="cls-3" points="141.41 29.39 141.41 30.89 141.41 37.93 141.41 46.53 141.41 59.08 174.83 59.08 174.83 52.03 148.46 52.03 148.46 46.53 148.46 44.98 168.72 44.98 168.72 37.93 148.46 37.93 148.46 30.89 174.83 30.89 174.83 23.84 141.41 23.84 141.41 29.39"/><path class="cls-3" d="M221.08,49.87a8.74,8.74,0,0,1-.73,3.57,9,9,0,0,1-2,2.94,9.5,9.5,0,0,1-2.93,2,9,9,0,0,1-3.6.73h-33V51.66h33a1.78,1.78,0,0,0,1.79-1.79V47a1.76,1.76,0,0,0-.52-1.27,1.73,1.73,0,0,0-1.27-.51H188.09a8.74,8.74,0,0,1-3.57-.73,9.4,9.4,0,0,1-5-5,8.9,8.9,0,0,1-.73-3.57V33.09a9.11,9.11,0,0,1,.73-3.59,9.58,9.58,0,0,1,2-2.94,9.32,9.32,0,0,1,3-2,8.9,8.9,0,0,1,3.57-.72h33v7.47h-33a1.78,1.78,0,0,0-1.79,1.78V36a1.78,1.78,0,0,0,1.79,1.79h23.73a9.11,9.11,0,0,1,3.6.72,9.59,9.59,0,0,1,2.93,2,9.41,9.41,0,0,1,2,2.94,8.9,8.9,0,0,1,.73,3.59Z"/><path class="cls-3" d="M265.54,59.08h-6.73V45.22H232.6V59.08h-6.72V37.75h32.93V23.84h6.73ZM232.6,34.44h-6.72V23.84h6.72Z"/><polygon class="cls-3" points="361.45 36.17 352.64 23.84 343.83 23.84 357.93 44.98 357.93 59.08 364.98 59.08 364.98 44.98 379.08 23.84 370.38 23.84 361.45 36.17"/><path class="cls-3" d="M315.35,30.56h18.07v7.33H318.86v6.72h3.34L335,59.08h8.7L330.9,44.61h5a5.48,5.48,0,0,0,5.48-5.48V29.31a5.47,5.47,0,0,0-5.48-5.47H308.44V59.08h7.05Z"/><path class="cls-3" d="M136,59.08h-7.47V33.38a1.94,1.94,0,0,0-.16-.8,2.15,2.15,0,0,0-1.11-1.11,1.94,1.94,0,0,0-.8-.16H91.91V23.84h34.54a9.22,9.22,0,0,1,3.69.75,9.38,9.38,0,0,1,5.1,5.1,9.22,9.22,0,0,1,.75,3.69Zm-36.6,0H91.91V31.31l7.48-2Zm18.28,0h-7.48V35.22h7.48Z"/></svg>
        <span
          class="font-weight-bold small-hide"
          style="
            font-size: 2rem;
            vertical-align: bottom;
            color: var(--meshery-logo-text-fill);
            font-family: 'Open Sans';
          "
          >Documentation</span
        >
      </div>
    </a>

    <div id="main_navbar">
      <ul class="navbar-nav">
        <!-- 
			<li class="nav-item">
        <a class="nav-link" href="https://github.com/meshery/meshery" target="_blank"><span>GitHub</span></a>
      </li>  -->

        <!-- Internal links -->
        
        <li class="nav-item">
          <a
            class="nav-link"
            href="/installation/quick-start"
            ><span>Quick Start</span></a
          >
        </li>
        
        <li class="nav-item">
          <a
            class="nav-link"
            href="https://meshery.io"
            ><span>Site</span></a
          >
        </li>
        
        <li class="nav-item">
          <a
            class="nav-link"
            href="http://discuss.meshery.io/"
            ><span>Discuss</span></a
          >
        </li>
        
        
        <a href="https://play.meshery.io">
          <div class="nav-btn">Playground</div>
        </a>
        <!--Version Selector -->
        <select
          onchange="window.location=this.value"
          class="appearance-none flex-1 w-full px-0 py-1 placeholder-gray-900 tracking-wide focus:outline-none version-selector"
          name="versioningSelection"
          id="versioningSelection"
        >
       </select>

          <!-- <option value="">Versions</option> -->
          <option  
           value="/"
           class="nav-item mr-4 mb-2 mb-lg-0 text-black">
           <span>latest</span>
         </option>
         <option  
          value="/v0.6"
          class="nav-item mr-4 mb-2 mb-lg-0 text-black">
         <span>v0.6</span>
       </option>
         <!-- we get the version selected, and put it to the right option  -->
         <option  
           value="/v0.5"
           class="nav-item mr-4 mb-2 mb-lg-0 text-black">
           <span>v0.5</span>
         </option>
         <!-- we get the version selected, and put it to the right option  --><option
           
           value="/v0.4"
           class="nav-item mr-4 mb-2 mb-lg-0 text-black"
         >
           <span>v0.4</span>
         </option>
         
       </select>
      </ul>
    </div>

    <div class="icon-container">
      <button class="nav-toggle-btn nav-toggle-btn--main">
        <svg
          id="menu-nav-toggle-btn"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="feather feather-menu"
        >
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
      </button>
      <button class="nav-mode-icon" id="mode-toggle-btn" style="text-align: center">
        <img class="nav-text" id="logo-dark-light" src="/assets/img/nav-icons/mode-toggle-icon-moon.png" 
        data-logo-for-dark="/assets/img/nav-icons/mode-toggle-icon-moon.png"
        data-logo-for-light="/assets/img/nav-icons/mode-toggle-icon-sun.png"
        />
      </button>
    </div>

    <!--Search Bar
    <div class="navbar-nav d-none d-lg-block"><input type="search" class="form-control td-search-input" placeholder="&#xf002 Search this site…" aria-label="Search this site…" autocomplete="off"></div>-->

    <!-- meshery-custom-begin
	<div class="navbar-nav d-none d-lg-block">
          <a class="gh-source" data-gh-source="github" href="https://github.com/meshery/meshery" title="Go to repository" data-md-state="done">
          <div class="gh-source__repository">
            <i class="fab fa fa-github fa-2x" style='padding-right:20px; float:left; margin-top:5px'></i>
            meshery/meshery
          <ul class="gh-source__facts"><li class="gh-source__fact" id='stars'></li><li id="forks" class="gh-source__fact"></li></ul></div></a>
        </div>
      </div>
meshery-custom-end -->
  </nav>
</header>

<!-- meshery-custom-begin
<script>
$(document).ready(function() {
  var url = "https://api.github.com/search/repositories?q=meshery/meshery";
  fetch(url, { 
      headers: {"Accept":"application/vnd.github.preview"}
  }).then(function(e) {
    return e.json()
  }).then(function(r) {
     console.log(r.items[0])
     stars = r.items[0]['stargazers_count']
     forks = r.items[0]['forks_count']
     $('#stars').text(stars + " Stars")
     $('#forks').text(forks + " Forks")
  });
});
</script>
meshery-custom-end -->


  <body class="td-section dark-mode">
    <script>
      if(localStorage.getItem("mode") == "light-mode")  {
      document.body.classList.remove("dark-mode");
      const allLogos = document.querySelectorAll("#logo-dark-light");
      allLogos.forEach(e => e.src = e.dataset.logoForLight);
  }
    </script>
    <div class="flex-container">
      <div class="left-container">
        <div class="sidebar-container-wrapper">
          <div class="sidebar-container"><div class="sidebar-menu">
  <form class="sidebar__search-form">
    <input
      type="search"
      class="sidebar__search-input"
      id="sidebar-search-input"
      placeholder="Search this site..."
      aria-label="Search this site..."
      autocomplete="off"
    />
  </form>

  <script type="text/javascript">
    <!--Ref: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView-->
    <!--Ref: https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move-->
    (() => {
      window.addEventListener("load", function () {
        let scrollElem = document.getElementsByClassName("sidebar-nav__section-link active").item(0);
        scrollElem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
      });
    })();
  </script>

  <nav class="sidebar-nav" id="td-section-nav">
    
    <ul class="sidebar-nav__section">
       
      <li class="sidebar-nav__section-title ">
        <a
          href="/installation/quick-start"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
          >🚀 Quick Start
        </a>
      </li>
      
      <ul>
        <li id="quick-start">
          <ul class="td-sidebar-nav__section">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/installation"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Supported Platforms ↆ</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/installation/compatibility-matrix"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Compatibility Matrix</a
              >
            </li>
             
          </ul>
        </li>
      </ul>

      

    </ul>
    
    <ul class="sidebar-nav__section">
       
      <li class="sidebar-nav__section-title ">
        <a
          href="/project/overview"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
          >🗺 Overview
        </a>
      </li>
      
      <ul>
        <li id="overview">
          <ul class="td-sidebar-nav__section">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/project/faq"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >FAQ</a
              >
            </li>
             
          </ul>
        </li>
      </ul>

      

    </ul>
    
    <ul class="sidebar-nav__section">
       
      <li class="sidebar-nav__section-title ">
        <a
          href="/project"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
          >🧑‍💻 Contributing & Community
        </a>
      </li>
      
      <ul>
        <li id="contributing-community">
          <ul class="td-sidebar-nav__section">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/project/community"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Community</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/project/contributing"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Contributing ↆ</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/project/releases"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Releases</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/project/security-vulnerabilities"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Vulnerabilities</a
              >
            </li>
             
          </ul>
        </li>
      </ul>

      

    </ul>
    
    <ul class="sidebar-nav__section">
       
      <li class="sidebar-nav__section-title ">
        <a
          href="/concepts"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
          >🧠 Concepts
        </a>
      </li>
      
      <ul>
        <li id="concepts">
          <ul class="td-sidebar-nav__section">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/concepts/architecture"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Architectural ↆ</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/concepts/logical"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Logical ↆ</a
              >
            </li>
             
          </ul>
        </li>
      </ul>

      

    </ul>
    
    <ul class="sidebar-nav__section">
       
      <li class="sidebar-nav__section-title ">
        <a
          href="/tasks"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
          >⚙️ Tasks (all)
        </a>
      </li>
      
      <ul>
        <li id="tasks-all">
          <ul class="td-sidebar-nav__section">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/tasks/application-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Application Management</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/tasks/filter-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Filter Management</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/tasks/lifecycle-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Lifecycle Management</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/tasks/pattern-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Pattern Management</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/tasks/performance-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Performance Management</a
              >
            </li>
             
          </ul>
        </li>
      </ul>

      

    </ul>
    
    <ul class="sidebar-nav__section">
       
      <li class="sidebar-nav__section-title ">
        <a
          href="/guides"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
          >📚 Guides (all)
        </a>
      </li>
      
      <ul>
        <li id="guides-all">
          <ul class="td-sidebar-nav__section">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/meshery-metrics"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Integrating Prometheus and Grafana</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/importing-apps"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Importing Applications</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/pipelining-service-mesh-specifications"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Pipelining service mesh specifications</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/performance-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Performance Management with Meshery</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/troubleshooting"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Troubleshooting Guide</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/upgrade"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Upgrading Meshery</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/mesheryctl"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Using mesheryctl ↆ</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/multiple-adapters"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Using Multiple Meshery Adapters</a
              >
            </li>
             
          </ul>
        </li>
      </ul>

      

    </ul>
    
    <ul class="sidebar-nav__section">
       
      <li class="sidebar-nav__section-title ">
        <a
          href="/extensibility"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
          >🛠 Extensibility
        </a>
      </li>
      
      <ul>
        <li id="extensibility">
          <ul class="td-sidebar-nav__section">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/adapters"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Adapters</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/load-generators"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Load Generators</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/providers"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Providers</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/api"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >REST & GraphQL APIs</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/ui"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >UI Plugins</a
              >
            </li>
             
          </ul>
        </li>
      </ul>

      

    </ul>
    
    <ul class="sidebar-nav__section">
       
      <li class="sidebar-nav__section-title ">
        <a
          href="/reference"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
          >📖 Reference
        </a>
      </li>
      
      <ul>
        <li id="reference">
          <ul class="td-sidebar-nav__section">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/reference/mesheryctl"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Meshery CLI</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/reference/error-codes"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Error Codes</a
              >
            </li>
              
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/api"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >REST & GraphQL APIs ↆ</a
              >
            </li>
             
          </ul>
        </li>
      </ul>

      

    </ul>
    
  </nav>
</div>
</div>
        </div>

        <div class="icon-container">
          <button class="nav-toggle-btn nav-toggle-btn--document">
            <?xml version="1.0" encoding="utf-8"?>
              <svg version="1.1" id="document-nav-toggle-btn" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px" y="0px" viewBox="0 0 10.7 18.7" style="enable-background:new 0 0 10.7 18.7;" xml:space="preserve">
              <style type="text/css">
                .st0{stroke:#000000;stroke-width:1.5;stroke-miterlimit:10;}
              </style>
              <path class="st0" d="M8.1,9.4L1,1.9C0.7,1.7,0.7,1.2,1,1c0.3-0.3,0.7-0.3,1,0c0,0,0,0,0,0l7.8,7.9c0.3,0.3,0.3,0.7,0,1l-7.8,7.9
                c-0.3,0.3-0.7,0.3-1,0c0,0,0,0,0,0c-0.3-0.3-0.3-0.7,0-1L8.1,9.4z"/>
              </svg>
          </button>
        </div>
      </div>
      <main class="main-container" role="main">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb spb-1">
            <li class="breadcrumb-item active" aria-current="page"><div id="breadcrumbs">


   <a href="/">home</a>


  
    / <a href="/extensions">extensions</a> 
  

  
    / meshmap snapshot
  

</div>

<!-- <a href="http://idratherbewriting.com" class="noCrossRef productSubtitle"> Home </a> > <a class="noCrossRef productSubtitle" href="http://localhost:4000">Learn API Doc</a> > index -->
</li>
          </ol>
        </nav>
        <div class="td-content">
           <h1 id="--meshmap-snapshot"><img style="height: 4rem; width: 4rem;" src="/assets/img/meshmap-icon-color.svg" />  MeshMap Snapshot</h1>

<p>Walks in application and takes a shot of your infrastructure using Meshery Extension MeshMap</p>

<p>MeshMap Snapshot is a screenshot service provided via MeshMap for the design or Application user is interested in. It Enables users to visualize the changes being done in the code-base rapidly over each PR and inform the user about any potential changesin their infrastructure. It doesn’t need any configuration or setup neither any deployment by the client rather a simple one time setup is able to provide a long time value.</p>

<h3 id="guiding-principles">Guiding Principles</h3>

<p><strong>Step 1: The moving banner board to MeshMap</strong></p>

<p>The screenshots would be flowing through each PR giving product the eye-balls it needs</p>

<p><strong>Step 2: Understanding the designs and infrastructure via visual design without downloading or setting up the MeshMap explicitly</strong></p>

<p>You don’t have to explicitly install Meshery or MeshMap on your cluster to see their infrastructure or get benefits of the set of capabilities of MeshMap.</p>

<p><strong>Step 3: Introducing MeshMap along with Meshery in the GitOps field.</strong></p>

<p>This sets the foundation of MeshMap in the github lifecycle, PRs, comments and all for future.</p>

<h2 id="functional-sequence-diagram">Functional Sequence Diagram</h2>
<p>For Github Workflows:
<img src="/assets/img/meshmap/meshmap-snapshot.png" /></p>

<h2 id="example-usage">Example Usage:</h2>

<h3 id="add-meshmap-snapshot-github-pull-request">Add Meshmap Snapshot: Github Pull Request</h3>
<p>Connect MeshMap to your GitHub repo and see changes pull request-to-pull request. Get snapshots of your infrastructure directly in your PRs.</p>

<p><strong>Step 1: Log in to your Meshery Dashboard.</strong></p>

<p><strong>Step 2: Navigate to Extensions and Enable GitHub Action: MeshMap Snapshot.</strong></p>

<p><strong>Step 3: You will be directed to Meshery Cloud.</strong></p>

<p><strong>Step 4: Click on the “Let’s Go” button in the onboarding modal.</strong></p>

<p><strong>Step 5: Now, select the second option, ‘GitOps your infrastructure with MeshMap Snapshot’.</strong></p>

<p><strong>Step 6: Once that’s complete, follow the guided instructions.</strong></p>

<p><strong>Steps 7: Voila, you’re all set!</strong></p>

<h3 id="when-infrastructure-is-located-in-the-file-system">When Infrastructure is located in the file-system</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">name</span><span class="pi">:</span> <span class="s1">'</span><span class="s">MeshMap</span><span class="nv"> </span><span class="s">Snapshot</span><span class="nv"> </span><span class="s">With</span><span class="nv"> </span><span class="s">File-located</span><span class="nv"> </span><span class="s">in</span><span class="nv"> </span><span class="s">Fs'</span>
<span class="na">on</span><span class="pi">:</span> <span class="c1"># rebuild any PRs and main branch changes</span>
  <span class="na">pull_request</span><span class="pi">:</span>
  <span class="na">push</span><span class="pi">:</span>
    <span class="na">branches</span><span class="pi">:</span>
      <span class="pi">-</span> <span class="s">main</span>
      <span class="pi">-</span> <span class="s">master</span>
      <span class="pi">-</span> <span class="s1">'</span><span class="s">releases/*'</span>

<span class="na">jobs</span><span class="pi">:</span>
  <span class="na">test</span><span class="pi">:</span> <span class="c1"># make sure the action works on a clean machine without building</span>
    <span class="na">runs-on</span><span class="pi">:</span> <span class="s">ubuntu-latest</span>
    <span class="na">steps</span><span class="pi">:</span>
      <span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">Set PR number</span> <span class="c1"># To comment the final status on the Pull-request opened in any repository</span>
        <span class="na">run</span><span class="pi">:</span> <span class="pi">|</span>
          <span class="s">export pull_number=$(jq --raw-output .pull_request.number "$GITHUB_EVENT_PATH")</span>
          <span class="s">echo "PULL_NO=$pull_number" &gt;&gt; $GITHUB_ENV</span>
      <span class="pi">-</span> <span class="na">uses</span><span class="pi">:</span> <span class="s">actions/checkout@v3</span> <span class="c1"># the repository where your infrastructure is located</span>
      <span class="pi">-</span> <span class="na">uses</span><span class="pi">:</span> <span class="s">actions/checkout@v3</span> <span class="c1">#this step would go and would be no longer needed to be written</span>
        <span class="na">with</span><span class="pi">:</span>
          <span class="na">path</span><span class="pi">:</span> <span class="s">action</span>
          <span class="na">repository</span><span class="pi">:</span> <span class="s">layer5labs/meshmap-snapshot</span>
      <span class="pi">-</span> <span class="na">id</span><span class="pi">:</span> <span class="s">test_result</span>
        <span class="na">uses</span><span class="pi">:</span> <span class="s">layer5labs/MeshMap-Snapshot@v0.0.4</span>
        <span class="na">with</span><span class="pi">:</span>
          <span class="na">githubToken</span><span class="pi">:</span> <span class="s">$</span> <span class="c1"># github's personal access token example: "ghp_...."</span>
          <span class="na">providerToken</span><span class="pi">:</span> <span class="s">$</span> <span class="c1"># Meshery Cloud Authentication token, signin to meshery-cloud to get one, example: ey.....</span>
          <span class="na">prNumber</span><span class="pi">:</span> <span class="s">$</span> <span class="c1"># auto-filled from the above step</span>
          <span class="na">application_type</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Kubernetes</span><span class="nv"> </span><span class="s">Manifest"</span> <span class="c1"># your application type, could be any of three: "Kubernetes Manifest", "Docker Compose", "Helm Chart"</span>
          <span class="na">filePath</span><span class="pi">:</span> <span class="s2">"</span><span class="s">action/__tests__/manifest-test"</span> <span class="c1"># relative file-path from the root directory in the github-runner env, you might require to checkout the repository as described in step 2</span>
</code></pre></div></div>
<h3 id="when-infrastructure-is-identified-via-url">When Infrastructure is identified via URL</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">name</span><span class="pi">:</span> <span class="s1">'</span><span class="s">MeshMap</span><span class="nv"> </span><span class="s">Snapshot</span><span class="nv"> </span><span class="s">With</span><span class="nv"> </span><span class="s">URL-Upload'</span>
<span class="na">on</span><span class="pi">:</span> <span class="c1"># rebuild any PRs and main branch changes</span>
  <span class="na">pull_request</span><span class="pi">:</span>
  <span class="na">push</span><span class="pi">:</span>
    <span class="na">branches</span><span class="pi">:</span>
      <span class="pi">-</span> <span class="s">main</span>
      <span class="pi">-</span> <span class="s">master</span>
      <span class="pi">-</span> <span class="s1">'</span><span class="s">releases/*'</span>

<span class="na">jobs</span><span class="pi">:</span>
  <span class="na">test</span><span class="pi">:</span> <span class="c1"># make sure the action works on a clean machine without building</span>
    <span class="na">runs-on</span><span class="pi">:</span> <span class="s">ubuntu-latest</span>
    <span class="na">steps</span><span class="pi">:</span>
      <span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">Set PR number</span> <span class="c1"># To comment the final status on the Pull-request opened in any repository</span>
        <span class="na">run</span><span class="pi">:</span> <span class="pi">|</span>
          <span class="s">export pull_number=$(jq --raw-output .pull_request.number "$GITHUB_EVENT_PATH")</span>
          <span class="s">echo "PULL_NO=$pull_number" &gt;&gt; $GITHUB_ENV</span>
      <span class="pi">-</span> <span class="na">uses</span><span class="pi">:</span> <span class="s">actions/checkout@v3</span> <span class="c1">#this step would go and would be no longer needed to be written</span>
        <span class="na">with</span><span class="pi">:</span>
          <span class="na">path</span><span class="pi">:</span> <span class="s">action</span>
          <span class="na">repository</span><span class="pi">:</span> <span class="s">layer5labs/meshmap-snapshot</span>
      <span class="pi">-</span> <span class="na">id</span><span class="pi">:</span> <span class="s">test_result</span>
        <span class="na">uses</span><span class="pi">:</span> <span class="s">layer5labs/MeshMap-Snapshot@v0.0.4</span>
        <span class="na">with</span><span class="pi">:</span>
          <span class="na">githubToken</span><span class="pi">:</span> <span class="s">$</span> <span class="c1"># github's personal access token example: "ghp_...."</span>
          <span class="na">providerToken</span><span class="pi">:</span> <span class="s">$</span> <span class="c1"># Meshery Cloud Authentication token, signin to meshery-cloud to get one, example: ey.....</span>
          <span class="na">prNumber</span><span class="pi">:</span> <span class="s">$</span> <span class="c1"># auto-filled from the above step</span>
          <span class="na">application_type</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Helm</span><span class="nv"> </span><span class="s">Chart"</span> <span class="c1"># your application type, could be any of three: "Kubernetes Manifest", "Docker Compose", "Helm Chart"</span>
          <span class="na">application_url</span><span class="pi">:</span> <span class="s2">"</span><span class="s">https://github.com/meshery/meshery.io/raw/master/charts/meshery-v0.6.88.tgz"</span>
</code></pre></div></div>

<h4 id="filesystem-approach-notes">FileSystem Approach Notes</h4>
<p>The filesystem-approach asks for your relative file-path and automatically merges all the yaml files together to bundle up into one. So you might like to give the root directory where all the yamls are located. It doesn’t move recursevely in internal folders, so only the first level yaml files are checked.</p>

<h2 id="list-of-input-variables-supported">List of Input variables supported:</h2>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">designId</span><span class="pi">:</span>  <span class="c1"># id of input  #deprecated</span>
  <span class="na">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">The</span><span class="nv"> </span><span class="s">design</span><span class="nv"> </span><span class="s">uuid,</span><span class="nv"> </span><span class="s">example:</span><span class="nv"> </span><span class="s">3c116d0a-49ea-4294-addc-d9ab34210662"</span>
  <span class="na">required</span><span class="pi">:</span> <span class="no">false</span>
  <span class="na">default</span><span class="pi">:</span> <span class="s1">'</span><span class="s">{}'</span>
<span class="na">applicationId</span><span class="pi">:</span>  <span class="c1">#deprecated</span>
  <span class="na">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">The</span><span class="nv"> </span><span class="s">application</span><span class="nv"> </span><span class="s">uuid,</span><span class="nv"> </span><span class="s">example:</span><span class="nv"> </span><span class="s">3c116d0a-49ea-4294-addc-d9ab34210662"</span>
  <span class="na">required</span><span class="pi">:</span> <span class="no">false</span>
<span class="na">githubToken</span><span class="pi">:</span>
  <span class="na">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Github</span><span class="nv"> </span><span class="s">PAT</span><span class="nv"> </span><span class="s">token"</span>
  <span class="na">required</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">providerToken</span><span class="pi">:</span>
  <span class="na">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Meshery</span><span class="nv"> </span><span class="s">Authentication</span><span class="nv"> </span><span class="s">Provider</span><span class="nv"> </span><span class="s">Token"</span>
  <span class="na">required</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">cypressRecordKey</span><span class="pi">:</span>
  <span class="na">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">cypress</span><span class="nv"> </span><span class="s">record</span><span class="nv"> </span><span class="s">key"</span>
  <span class="na">required</span><span class="pi">:</span> <span class="no">false</span>
<span class="na">prNumber</span><span class="pi">:</span>
  <span class="na">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">The</span><span class="nv"> </span><span class="s">Pull</span><span class="nv"> </span><span class="s">request</span><span class="nv"> </span><span class="s">on</span><span class="nv"> </span><span class="s">which</span><span class="nv"> </span><span class="s">comment</span><span class="nv"> </span><span class="s">has</span><span class="nv"> </span><span class="s">to</span><span class="nv"> </span><span class="s">be</span><span class="nv"> </span><span class="s">made"</span>
  <span class="na">required</span><span class="pi">:</span> <span class="no">false</span>
  <span class="na">default</span><span class="pi">:</span> <span class="m">0</span>
<span class="na">filePath</span><span class="pi">:</span> 
  <span class="na">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">The</span><span class="nv"> </span><span class="s">relative</span><span class="nv"> </span><span class="s">filepath</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">the</span><span class="nv"> </span><span class="s">location</span><span class="nv"> </span><span class="s">where</span><span class="nv"> </span><span class="s">the</span><span class="nv"> </span><span class="s">manifests</span><span class="nv"> </span><span class="s">are</span><span class="nv"> </span><span class="s">stored"</span>
  <span class="na">required</span><span class="pi">:</span> <span class="no">false</span>
<span class="na">application_type</span><span class="pi">:</span>
  <span class="na">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Application</span><span class="nv"> </span><span class="s">upload</span><span class="nv"> </span><span class="s">type,</span><span class="nv"> </span><span class="s">any</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">the</span><span class="nv"> </span><span class="s">three,</span><span class="nv"> </span><span class="s">Kubernetes</span><span class="nv"> </span><span class="s">Manifest,</span><span class="nv"> </span><span class="s">Docker</span><span class="nv"> </span><span class="s">Compose,</span><span class="nv"> </span><span class="s">Helm</span><span class="nv"> </span><span class="s">Chart"</span>
  <span class="na">required</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">application_url</span><span class="pi">:</span>
  <span class="na">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Application's</span><span class="nv"> </span><span class="s">source</span><span class="nv"> </span><span class="s">url</span><span class="nv"> </span><span class="s">where</span><span class="nv"> </span><span class="s">the</span><span class="nv"> </span><span class="s">manifests</span><span class="nv"> </span><span class="s">or</span><span class="nv"> </span><span class="s">data</span><span class="nv"> </span><span class="s">is</span><span class="nv"> </span><span class="s">stored"</span>
  <span class="na">required</span><span class="pi">:</span> <span class="no">false</span>
</code></pre></div></div>

<h2 id="customizing-snapshot-workflow-triggers-in-meshmap-snapshot">Customizing Snapshot Workflow Triggers in MeshMap Snapshot</h2>
<p>You can configure your workflows to run when specific activity on GitHub happens, at a scheduled time, or when an event outside of GitHub occurs.</p>

<h3 id="about-events-that-trigger-workflows">About events that trigger workflows</h3>
<p>GitHub Actions provides a variety of events that can trigger workflows, allowing you to automate your software development process. Each event corresponds to a specific activity, such as creating a pull request, pushing code to a repository, or releasing a new version.</p>

<h3 id="supported-events">Supported Events</h3>

<p>The MeshMap Snapshot Action supports all of the events listed in the GitHub documentation: 
For detailed information about each event, including its properties and payloads, refer to the <a href="https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows">GitHub Actions documentation</a>.</p>

<h3 id="workflow-syntax-for-event-filtering">Workflow Syntax for Event Filtering</h3>

<p>When defining workflows, you can use the <code class="language-plaintext highlighter-rouge">on</code> keyword to specify which events trigger the workflow. You can further filter the triggering conditions by using the <code class="language-plaintext highlighter-rouge">types</code>, <code class="language-plaintext highlighter-rouge">branches</code>, <code class="language-plaintext highlighter-rouge">tags</code>, and other options. For example:</p>

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">on</span><span class="pi">:</span>
  <span class="na">push</span><span class="pi">:</span> 
    <span class="na">branches</span><span class="pi">:</span>
      <span class="pi">-</span> <span class="s">main</span>
  <span class="na">pull_request</span><span class="pi">:</span>
    <span class="na">types</span><span class="pi">:</span>
      <span class="pi">-</span> <span class="s">opened</span>
      <span class="pi">-</span> <span class="s">synchronize</span>
</code></pre></div></div>

<p>Specific events that are relevant to the MeshMap Snapshot Action are:</p>

<ul>
  <li><strong>push:</strong> This event is triggered when code is pushed to the repository. It is the most common event used to trigger workflows.</li>
  <li>
    <p><strong>pull_request:</strong> This event is triggered when a pull request is opened or updated. It is often used to trigger workflows that run tests or linters on the pull request’s code.</p>
  </li>
  <li><strong>workflow_dispatch:</strong> This event is triggered when a workflow is manually triggered. It can be used to trigger workflows on demand, such as for publishing a new release or addressing critical bugs.</li>
</ul>

<p>For a comprehensive list of events that can be used in GitHub Actions, please refer to the Supported Events section above.</p>

<h2 id="what-happens-to-workflow-customizations-on-upgrade">What Happens to Workflow Customizations on Upgrade?</h2>

<p>Customizations to the trigger criteria for the MeshMap Snapshot actions are preserved when upgrading to a new version of the action. However, there may be some cases where customizations are lost, such as when the syntax for specifying the trigger criteria changes in a new version of the action.</p>

<p>Here are some examples of cases where customizations may be lost:</p>

<ul>
  <li>
    <p>You currently have a workflow that is triggered on the push event, and the syntax for specifying the push event changes in a new version of the action.</p>
  </li>
  <li>
    <p>You have a workflow that is triggered on a custom event, and the custom event is no longer supported in a new version of the action.</p>
  </li>
</ul>

<p>It is always a good practice to test your workflows after upgrading to a new version of the MeshMap Snapshot Action to make sure that your customizations are still working as expected.</p>

<h2 id="usage">Usage:</h2>

<p>After testing you can <a href="https://github.com/actions/toolkit/blob/master/docs/action-versioning.md">create a v1 tag</a> to reference the stable and latest V1 action</p>

<h1 id="general-upgrade-guide">General Upgrade Guide</h1>
<p><a href="https://github.com/layer5labs/meshmap-snapshot/releases">MeshMap Snapshot Release Page</a></p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> - id: test_result
        uses: layer5labs/MeshMap-Snapshot@v0.0.5 # &lt;-- Update the version to latest from the MeshMap-Snapshot release page
        with:
        ...
</code></pre></div></div>

<h2 id="upgrademigrate-guide---for-meshery">Upgrade/Migrate Guide - For Meshery</h2>
<ol>
  <li>Given changes done in <code class="language-plaintext highlighter-rouge">action.yml</code> in MeshMap Snapshot, updating the workflows is required.</li>
  <li>Given changes done other than in <code class="language-plaintext highlighter-rouge">action.yml</code> in MeshMap Snapshot, the update in the <code class="language-plaintext highlighter-rouge">.github/worflows</code> is not a hard requirement, but doesnt hurt.</li>
</ol>

  <br/>


        </div>
      </main>
      
      <div class="content-table-wrapper">
        <div class="content-table">
          <div class="content-table__editable"><strong>Tools</strong>
<a href="https://github.com/meshery/meshery/issues/new?assignees=&labels=area%2Fdocs%2C+framework%2Fjekyll&template=documentation.md&title=%5BDocs%5D" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i> Create doc issue</a>
<a href="https://github.com/meshery/meshery/blob/master/docs/pages/extensions/snapshot/index.md" rel="noopener" target="_blank"><i class="fa fa-edit fa-fw"></i> Edit this page</a>
<a href="https://github.com/meshery/meshery/new/master/docs/pages/extensions/snapshot/index.md?filename=change-me.md&value=---%0Atitle%3A+%22Long+Page+Title%22%0AlinkTitle%3A+%22Short+Nav+Title%22%0Aweight%3A+100%0Adescription%3A+%3E-%0A+++++Page+description+for+heading+and+indexes.%0A---%0A%0A%23%23+Heading%0A%0AEdit+this+template+to+create+your+new+page.%0A%0A%2A+Give+it+a+good+name%2C+ending+in+%60.md%60+-+e.g.+%60getting-started.md%60%0A%2A+Edit+the+%22front+matter%22+section+at+the+top+of+the+page+%28weight+controls+how+its+ordered+amongst+other+pages+in+the+same+directory%3B+lowest+number+first%29.%0A%2A+Add+a+good+commit+message+at+the+bottom+of+the+page+%28%3C80+characters%3B+use+the+extended+description+field+for+more+detail%29.%0A%2A+Create+a+new+branch+so+you+can+preview+your+new+file+and+request+a+review+via+Pull+Request.%0A" rel="noopener" target="_blank"><i class="fa fa-plus fa-fw"></i> Create new page</a>


<!-- this will parse through the header fields and add a button to open
     an issue / ask a question on Github. The editable field should be in
     the post frontend matter, and refer to the label to open the issue for -->
     
</div>
          <nav id="TableOfContents">
            <strong>Contents</strong>
            <ul>
              <li>
                <ul id="TOC">
                  <!-- Links will be appended here-->
                </ul>
              </li>
            </ul>
          </nav>
        </div>
      </div>
      
    </div>
    <footer class="footer">
  <!-- meshery-custom-begin"
      <div class="col-6 col-sm-4 text-xs-center order-sm-2">

<ul class="list-inline mb-0">
  <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="" aria-label="Twitter" data-original-title="Twitter">
    <a class="text-white" target="_blank" href="https://twitter.com/https://twitter.com/mesheryio">
      <i class="fab fa-twitter"></i>
    </a>
  </li>
</ul>
</div>
<div class="col-6 col-sm-4 text-right text-xs-center order-sm-3">
<ul class="list-inline mb-0">
  <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="" aria-label="GitHub" data-original-title="GitHub">
    <a class="text-white" target="_blank" href="https://github.com/meshery/meshery">
      <i class="fab fa-github"></i>
    </a>
  </li>
</ul>
meshery-custom-end -->
  <div class="text-white">&copy; 2023 The Meshery Authors</div>
  

  <!-- meshery-custom-begin -->

  <div class="footer-icons-list">
    <div class="footer-icons">
      <a class="social__link social__link--forum" href="http://discuss.meshery.io" target="_blank" rel="noreferrer">
        <img
          src=""
          alt="forum"
        />
        <span class="footer-icons-text small-hide">Community discussion forum</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link social__link--mail" href="https://meshery.io/subscribe" target="_blank" rel="noreferrer">
        <img
          src=""
          alt="mail"
        />
        <span class="footer-icons-text small-hide">Get connected with the Layer5 community</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link social__link--slack" href=" https://slack.meshery.io/" target="_blank" rel="noreferrer">
        <img
          class="slack"
          src=""
          alt="slack"
        />
        <span class="footer-icons-text small-hide">Join the Meeshery Slack</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="https://meshery.io/calendar">
        <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
          <path
            d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"
          />
          <g stroke-linecap="undefined" stroke-linejoin="undefined">
            <path d="M-3.468 8.168h-.033m25.313-4.242l-.063-.254M7.858 4.814v9.387" />
            <path d="M1.833 9.507h12.051" />
          </g>
        </svg>
        <span class="footer-icons-text small-hide">Subscribe to the community calender</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="https://twitter.com/mesheryio" target="_blank" rel="noreferrer">
       <svg fill="#999" alt="twitter" class="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1" height="1.8em"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" fill="#0d0d0d"></path></svg>
       <span class="footer-icons-text small-hide">Follow on Twitter</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="https://github.com/meshery" target="_blank" rel="noreferrer">
        <img
          class="github"
          src=""
          alt="github"
        />
        <span class="footer-icons-text small-hide">Contribute on GitHub</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="https://www.linkedin.com/company/layer5" target="_blank" rel="noreferrer">
        <img
          class="linkedin"
          src=""
          alt="linkedin"
        />
        <span class="footer-icons-text small-hide">Connect on LinkedIn</span>
      </a>
    </div>

    <div class="footer-icons">
      <a
        class="social__link"
        href="https://www.youtube.com/Layer5io?sub_confirmation=1"
        target="_blank"
        rel="noreferrer"
      >
        <img
          class="youtube"
          src=""
          alt="youtube"
        />
        <span class="footer-icons-text small-hide">Watch community meeting recordings</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="https://hub.docker.com/u/layer5/" target="_blank" rel="noreferrer">
        <img
          class="docker"
          src=""
          alt="docker"
        />
        <span class="footer-icons-text small-hide">Access Docker images</span>
      </a>
    </div>
  </div>
  <!-- meshery-custom-end -->
</footer>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>

<script type="text/javascript" src="/assets/js/lightbox.js"></script>
<link rel="stylesheet" href="v0.6/assets/css/lightbox.css" />
<script type="module" src="https://md-block.verou.me/md-block.js"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="/assets/js/main.js"></script>
<script src="/assets/js/navbar.js"></script>

 <script async src='https://www.google-analytics.com/analytics.js'></script>
<script type="application/javascript">
var doNotTrack = false;
if (!doNotTrack) {
	window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
	ga('create', 'UA-00000000-0', 'auto');
	ga('send', 'pageview');
}
</script>

  </body>
</html>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<script>
$(document).ready(function() {

    var toc = $('#TOC');

    // Select each header
    sections = $('.td-content h1');
        $.each(sections, function(idx, v) {
            section = $(v);
            var div_id = $(section).attr('id');
            if(!section.hasClass('noTOC')){
               var div_text = section.text().split('¶')[0];
              var parent = $("#" + div_id)
              var content = '<li id="link_' + div_id + '" class="md-nav__item"><a class="md-nav__link" href="#' + div_id + '" title="' + div_text +'">' + div_text +'</a></li>';
              $(toc).append(content);
            }

            // Add section code to subnavigation
            var children = $('<nav class="md-nav"><ul class="md-nav__list"></nav></ul>')
            var contenders = $("#" + div_id).nextUntil("h1");
            $.each(contenders, function(idx, contender){
               if( !$(contender).hasClass("noTOC") && ($(contender).is('h2') || $(contender).is('h3')) ) {
                   var contender_id = $(contender).attr('id');
                   var contender_text = $(contender).text().split('¶')[0];
                   var content = '<li class="md-nav__item"><a class="md-nav__link" href="#' + contender_id + '" title="' + contender_text +'">' + contender_text +'</a></li>';
                   children.append(content);
                }
             })
             $("#link_" + div_id).append(children);
        });
        //added 'selected' tag to the first element of toc
        $('.md-nav__link').first().addClass('selected');

        $(window).scroll(function(e){
          // Detect how far are we from the top of the page
          let windowTop = $(this).scrollTop();
          // Loop through every navigation menu item
          $('.md-nav__link').each(function (event) {       
              if (windowTop >= $($(this).attr('href')).offset().top - 100) {
              // Remove 'selected' from previously highlighted menu items
              $('.selected').removeClass('selected');
              // Highlight the current menu item by adding 'selected' class
              $(this).addClass('selected');
          }
          if($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
            $('.selected').removeClass('selected');
              $(this).addClass('selected');
          }
        });
      })
      // Smooth scroll to target section when clicking on TOC link
      $('a[href^="#"]').on('click', function(event) {
        event.preventDefault();
        var target = $(this.hash);
        if (target.length) {
          $('html, body').animate({
          scrollTop: target.offset().top - 70
          }, 1000);
        }
      });
    });
</script>

